<template>
	<view class="carlist">
		<u-loading v-if="loading"></u-loading>
		<nav-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">商家列表</block>
		</nav-custom>
		<view class="top">
			<image src="../../static/img/utils/car-banner.png"></image>
		</view>
		<view class="brand">
			<view class="tit">你的婚期:</view>
			<view class="time">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="time-input">
						<view class="text">{{date}}</view>
						<view class="iconfont icon-a_down"></view>
					</view>
				</picker>
			</view>
		</view>
		<view class="brand">
			<view class="tit">你的手机号:</view>
			<view class="time">
				<input class="time-input" maxlength="11" type="number" placeholder="请输入你的真实手机号" @input="onKeyInput" placeholder-class="placeClass">
			</view>
		</view>
		<view class="brand">
			<view class="tit">头车品牌</view>
			<scroll-view class="scroll-view-brand" scroll-x="true">
				<view class="brand-list">
					<view class="item first-item" @click="onBrand('',true)">
						<view class="img" :class="{active: mainBrandId == ''}">
							<view class="iconfont icon-xiaoxi2"></view>
						</view>
						<view class="name">全部</view>
					</view>
					<view class="item" v-for="(item, index) in brandlist" :index="index" @click="onBrand(item.id,true)">
						<view class="img" :class="{active: item.id == mainBrandId}">
							<image :src="item.logo"></image>
						</view>
						<view class="name">{{ item.name }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="brand">
			<view class="tit">跟车品牌</view>
			<scroll-view class="scroll-view-brand" scroll-x="true">
				<view class="brand-list">
					<view class="item first-item" @click="onBrand('',false)">
						<view class="img" :class="{active: normalBrandId == ''}">
							<view class="iconfont icon-xiaoxi2"></view>
						</view>
						<view class="name">全部</view>
					</view>
					<view class="item" v-for="(item, index) in brandlist" :index="index" @click="onBrand(item.id,false)">
						<view class="img" :class="{active: item.id == normalBrandId}">
							<image :src="item.logo"></image>
						</view>
						<view class="name">{{ item.name }}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="brand">
			<view class="tit">你的预算:</view>
			<view class="slider-div">
				<slider-range :value="rangeValue" :min="rangeMin" :max="rangMax" :step="5" :bar-height="3" :block-size="20"
				 background-color="#EEEEF6" active-color="#e54d42" :format="format" :decorationVisible="true" @change="handleRangeChange"></slider-range>
			</view>
		</view>
		<view class="help-btn" @click="onHelpCart">帮我选婚车</view>
	</view>
</template>

<script>
	import SliderRange from '../../components/slider-range/index.vue';
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				loading: true,
				brandlist: [], //品牌列表
				rangeMin: 2000,
				rangMax: 18000,
				rangeValue: [4000, 6000],

				date: '请输入婚期',
				startDate: this.getData(),
				endDate: this.getData(1),

				mainBrandId: '', //头车品牌id
				normalBrandId: '', //跟车品牌id
				iphone: ''
			};
		},
		components: {
			SliderRange
		},
		onLoad(optin) {
			if(!uni.getStorageSync('brandList')){
				this.getBrandlist()
			}else{
				this.brandlist = uni.getStorageSync('brandList');
			}
		},
		methods: {
			...mapMutations(['brandList']),
			//获取手机号
			onKeyInput: function(event) {
				this.iphone = event.target.value
			},
			/**
			 * 获取日期
			 */
			getData(end) {
				let dd = new Date()
				let y = dd.getFullYear()
				let m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
				let d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
				return (end ? (y + 2) : y) + '-' + m + '-' + d
			},
			/**
			 * 选择婚期
			 */
			bindDateChange(e) {
				this.date = e.target.value
			},
			format(val) {
				return val + '元'
			},
			/**
			 * 滑动slider
			 */
			handleRangeChange(e) {
				this.rangeValue = e.map(item => Math.round(item / 100) * 100)
			},
			/**
			 * 获取品牌
			 */
			getBrandlist() {
				this.$api.BrandList('').then(res => {
					this.brandlist = res.data;
					this.brandList(res.data);  //store设置brandList值
					setTimeout(() => {
						this.loading = false				
					}, 500)
				});
			},
			/**
			 * 点击品牌
			 */
			onBrand(id, tpye) {
				if (tpye) {
					//头车
					this.mainBrandId = id;
				} else {
					//跟车
					this.normalBrandId = id;
				}
			},
			/**
			 * 获取婚车套餐列表
			 */
			onHelpCart() {
				if (this.date == '请输入婚期') {
					uni.showToast({
						icon: 'none',
						title: '请输入婚期'
					});
					return
				}
				if (!(/^1[0-9]{10}$/.test(this.iphone))) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					});
					return
				}
				let data = {
					cityId: this.$store.state.cityId,
					mainBrandId: this.mainBrandId,
					normalBrandId: this.normalBrandId,
					startPrice: this.rangeValue[0],
					endPrice: this.rangeValue[1],
					useCarTime: this.date,
					useCarType: 3,
					iphone: this.iphone
				}
				uni.showModal({
					title: "请确定您的信息",
					content: `每日婚车将为您提供详细的咨询服务 ${this.iphone}`,
					showCancel: false,
					confirmText: "确定",
					success: (res) => {
						if (res.confirm) {
							this.loading = true
							this.$api.HelpCart(data).then(res => {
								this.loading = false
								uni.showToast({
									icon: 'none',
									title: res.msg
								});
							});
						}
					}
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.carlist {
		padding-bottom: 100upx;

		.top {
			background-color: #fff;

			image {
				width: 100%;
				position: relative;
			}
		}

		.brand {
			padding: 20upx 0;

			.tit {
				font-size: 40upx;
				font-weight: bold;
				color: #313131;
				padding: 0 20upx 20upx;
			}

			.time {
				width: 710upx;
				margin: 0 auto;
				height: 80upx;
				background-color: #f5f5f5;
				border-radius: 40upx;

				.time-input {
					height: 80upx;
					display: flex;
					align-items: center;
					padding: 0 40upx;
					
					.text {
						flex: auto;
						font-size: 28upx;
						color: #999;
					}

					.iconfont {
						font-size: 20upx;
						color: #bbb;
					}
				}
				
				.placeClass{
					font-size: 28upx;
					color: #999;
				}
			}

			.slider-div {
				padding: 40upx 0;
			}

			.scroll-view-brand {
				width: 100%;

				.brand-list {
					display: flex;

					.item {
						&.first-item {
							.img {
								background: var(--gradualBlue);

								.iconfont {
									color: #fff;
								}
							}
						}

						flex: 0 0 132upx;

						.img {
							box-shadow: var(--redShadow);
							margin: 0 auto;
							height: 100upx;
							width: 100upx;
							border-radius: 50%;
							overflow: hidden;
							display: flex;
							padding: 10upx;
							align-items: center;
							justify-content: center;
							background-color: #f0f0f0;

							&.active {
								border: 4upx solid var(--pink);
							}

							image {
								width: 80upx;
								height: 80upx;
							}
						}

						.name {
							font-size: 28upx;
							color: #999;
							line-height: 1;
							padding-top: 20upx;
							text-align: center;
						}
					}
				}
			}
		}

		.help-btn {
			background: var(--gradualRed);
			height: 90upx;
			width: 710upx;
			border-radius: 45upx;
			text-align: center;
			line-height: 90upx;
			color: #fff;
			font-size: 32upx;
			font-weight: bold;
			box-shadow: var(--redShadow);
			margin: 0 auto;
		}
	}
</style>
